<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>归 档</title>
    <link rel="stylesheet" href="/fore/assets/css/layui.css">
    <link rel="icon" href="/fore/assets/images/favicon.ico" >
    <link rel="stylesheet" href="/fore/assets/icon/iconfont.css">
</head>
<body class="layui-bg-gray" >
<!--导航栏-->
<div class="layui-row ">
    <ul class="layui-nav layui-icon-align-center" style="text-align: center;">
        <li class="layui-nav-item "><a href="/fore/index/page"  style="font-size: 17px;"><i class="layui-icon layui-icon-home" style="padding-right: 5px;"></i>主页</a></li>
        <li class="layui-nav-item "><a href="/fore/category/page" style="font-size: 17px;"><i class="layui-icon layui-icon-app" style="padding-right: 5px;"></i>分类</a></li>
        <li class="layui-nav-item "><a href="/fore/tag/page" style="font-size: 17px;"><i class="layui-icon layui-icon-note" style="padding-right: 5px;"></i>标签</a></li>
        <li class="layui-nav-item layui-this"><a href="/fore/archive/page" style="font-size: 17px;"><i class="layui-icon layui-icon-chart" style="padding-right: 5px;"></i>归档</a></li>
        <li class="layui-nav-item "><a href="/fore/about/page" style="font-size: 17px;"><i class="layui-icon layui-icon-more" style="padding-right: 5px;"></i>关于</a></li>
    </ul>
</div>
<!--主体-->
<div class="layui-row " style="padding-top: 20px;padding-bottom: 20px;">
    <!--第二列-->
    <div class="layui-col-lg8 layui-col-lg-offset2" style="padding: 10px;">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 40px;min-height: 600px;">
                <div class="layui-row">
                    <!--第一列，左侧导航栏-->
                    <div class="layui-col-lg3 "  >
                        <div  class="layui-row" style="padding:20px;">
                            <fieldset class="layui-elem-field ">
                                <legend>归档</legend>
                                <div class="layui-card-body" style="text-align: center">
                                    <div class="layui-row" th:each="item:${monthList}">
                                            <a href=" javascript:void (0)" th:text="${item}" th:onclick="changeMonth([[${item}]])"></a>
                                        <hr>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <!--第二列，中间内容-->
                    <div class="layui-col-lg9 " style="padding: 10px;">
                        <div class="layui-row" >
                            <ul class="layui-timeline" id="previewModule" style="display: none" >
                                <!--简略信息模块-->
                                <li class="layui-timeline-item layui-anim layui-anim-upbit" v-for="item in items">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <fieldset class="layui-elem-field layui-timeline-title">
                                            <legend><a style="color: rgb(102,102,102)"  v-bind:href="'/fore/article/page/'+item.id" >{{item.title}}</a></legend>
                                            <div class="layui-field-box">
                                                <div class="layui-row">
                                                    <div class="layui-col-lg2">
                                                        <i class="layui-icon layui-icon-date" style="padding-right: 5px;"></i><span>{{item.createBy}}</span>
                                                    </div>
                                                    <div class="layui-col-lg1">
                                                        <i class="iconfont icon-eye" style="padding-right: 5px;"></i><span>{{item.traffic}}</span>
                                                    </div>
                                                    <div class="layui-col-lg6">
                                                        <i class="layui-icon layui-icon-note" style="padding-right: 5px;"></i>
                                                        <a style="color:rgb(102,102,102) " v-for="tagItem in item.tagList" v-bind:href="'/fore/article/tag/page?tagName='+tagItem">{{tagItem}}  </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="layui-row" style="text-align: center;display: none" id="pageSpliterDiv">
                            <div id="pageSpliter"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--页脚-->
<div class="layui-bg-black " style="height: 100px;" >
    <div class="layui-col-lg4 layui-col-lg-offset4" style="padding: 20px;text-align: center;line-height: 25px;">
        <span >@CopyRight 2019 ZhouJianGuo版权所有</span>
        <br>
        <a href="http://beian.miit.gov.cn"><span style="color: white">苏ICP备19061991号</span></a>
    </div>
</div>
<!--script配置-->
<script opacity="0.9"  src="/fore/assets/js/canvas-nest.js"></script>
<script src="/fore/assets/js/vue.js"></script>
<script src="/fore/assets/layui.js"></script>
<script>
    var previewModule=null;
    var total=[[${total}]]
    var pageSize=[[${pageSize}]]
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    function changeMonth(data){
        layui.use('laypage',function () {
            var $=layui.jquery;
            var laypage=layui.laypage

            $("#previewModule").fadeOut()
            //分页渲染
            $.ajax({
                dataType:'json',
                type:'get',
                url:"/fore/archive/article/list/1?month="+data+"&isAll=false",
                async:false,
                success:function (result) {
                    // layer.msg(JSON.stringify(result))
                    if(result.code==200){
                        total=result.pageInfo.total
                        pageSize=result.pageInfo.pageSize
                        previewModule.items=result.pageInfo.list
                        $('#previewModule').fadeIn()
                    }
                }
            })

            laypage.render({
                elem:'pageSpliter',
                curr:1,
                count:total,
                limit:pageSize,
                jump:function (obj,first) {
                    if(!first){
                        $("#previewModule").fadeOut()
                        $.ajax({
                            dataType:'json',
                            type:'get',
                            url:"/fore/archive/article/list/"+obj.curr+"?month="+data+"&isAll=false",
                            success:function (result) {
                                // layer.msg(JSON.stringify(result))
                                if(result.code==200){
                                    previewModule.items=result.pageInfo.list
                                    $('#previewModule').fadeIn()
                                }
                            }
                        })
                    }
                }
            })
        })
    }
    layui.use(['element','util','laypage','layer'],function () {
        var util=layui.util;
        var $=layui.jquery;
        var laypage=layui.laypage
        util.fixbar({
            top:true,
            css: { right: 15, bottom: 35 },
            bgcolor: '#A4A4A4',
            showHeight:100,
        })
        //监听

        //分页渲染
        laypage.render({
            elem:'pageSpliter',
            curr:1,
            count:total,
            limit:pageSize,
            jump:function (obj,first) {
                $("#previewModule").fadeOut()
                $.ajax({
                    dataType:'json',
                    type:'get',
                    url:"/fore/archive/article/list/"+obj.curr+"?month=&isAll=true",
                    success:function (result) {
                        // layer.msg(JSON.stringify(result))
                        if(result.code==200){
                            if(first){
                                previewModule=new Vue({
                                    el:'#previewModule',
                                    data:{
                                        items:result.pageInfo.list
                                    }
                                })
                                $('#pageSpliterDiv').fadeIn()
                            }else{
                                previewModule.items=result.pageInfo.list
                            }
                            $('#previewModule').fadeIn()
                        }
                    }
                })
            }
        })

    });
</script>
</body>

</html>
